<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-23 15:38:14
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-24 09:22:28
 * @FilePath: /consult-patient-vue3-ts/src/views/Home/components/KnowledgeList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { onMounted } from 'vue';
import KnowledgeCard from './KnowledgeCard.vue'
import lodash from 'lodash'
import { ref } from 'vue';
import { getKnowledgePage } from '@/services/consult'
import type { KnowledgeList, KnowledgeParams, KnowledgeType } from '@/types/consult'
// 使用原生监听滚动到底部加载更多
// const list = ref<number[]>([1])
// const loading = ref(false)
// const finished = ref(false)
// const onLoad = () => {
//     // 模拟加载更多
//     setTimeout(() => {
//         const data = [1, 2, 3, 4, 5]
//         list.value.push(...data)
//         // 模拟加载完毕
//         if (list.value.length > 20) {
//             finished.value = true
//         }
//         loading.value = false
//     }, 1000)
// }
// const handleScroll = () => {
//     const scrollY = window.scrollY;
//     const windowHeight = window.innerHeight;
//     const documentHeight = document.documentElement.scrollHeight;
//     const bottomOfPage = windowHeight + scrollY >= documentHeight;
//     if (bottomOfPage) {
//         // onLoad();
//         lodash.debounced(onLoad(), 800)
//     }
// };
// onMounted(() => {
//     window.addEventListener('scroll', handleScroll)
// })
const props = defineProps<{
    type: KnowledgeType
}>()
const list = ref<KnowledgeList>([])
const loading = ref(false)
const finished = ref(false)

const params = ref<KnowledgeParams>({
    type: props.type,
    current: 1,
    pageSize: 10
})
const onLoad = async () => {
    const res = await getKnowledgePage(params.value)
    list.value = [...list.value, ...res.data.rows]
    params.value.current++
    if (params.value.current > res.data.pageTotal || res.data.rows.length === 0) {
        finished.value = true
    }
    loading.value = false
}
onMounted(() => {
    onLoad()
})
</script>

<template>
    <div class="knowledge-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <knowledge-card v-for="(item, i) in list" :key="i" :item="item" />
        </van-list>
    </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
    padding: 0 15px;
}
</style>